<!-- 编辑弹窗 -->
<template>
  <el-dialog
    width="500px"
    :visible="visible"
    :lock-scroll="false"
    custom-class="ele-dialog-form"
    v-dialog-movable="false"
    title="修改密码"
    :size="defaultFormSize"
    @update:visible="updateVisible"
    :close-on-click-modal="false">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="60px"
      size="small"
      @keyup.enter.native="save"
      @submit.native.prevent>
      <el-form-item label="账号:" prop="UserName">
        <el-input
          disabled
          v-model="form.UserName"
          placeholder="请输入账号"/>
      </el-form-item>

      <el-form-item label="密码:" prop="UserPassword">
        <el-input
          type="password"
          clearable
          autocomplete="new-password"
          v-model="form.UserPassword"
          placeholder="请输入密码"
          style="width: 66%;margin-right: 4%"/>
        <el-button style="width: 30%" type="primary" plain @click="randomPassword">生成随机密码</el-button>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="save">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {randomString} from "@/utils/common";

  export default {
    name: 'user-edit-pwd',
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
    },
    data() {
      return {
        // 表单数据
        form: this.initFormData(this.data),
        // 表单验证规则
        rules: {
          UserPassword: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
        },
        // 提交状态
        loading: false,
      };
    },
    watch: {
      data() {
        this.form = this.initFormData(this.data);
      }
    },
    methods: {
      /* 生成随机密码 */
      randomPassword() {
        this.$refs['form'].clearValidate()
        let password = randomString(12);
        this.form.UserPassword = password
        this.$copyText(password).then(() => {
          this.$message.success('密码已复制到粘贴板');
        })
      },
      /* 保存编辑 */
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$http.post('/user/reset-password', this.form).then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$message({type: 'success', message: res.data.msg});
                this.updateVisible(false);
                this.form.UserPassword = ''
              } else {
                this.$message.error(res.data.msg);
              }
            }).catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      /* 初始化form数据 */
      initFormData(data) {
        let form = {};
        if (data) {
          form.UserID = data.UserID
          form.UserName = data.UserName
          form.UserPassword = ''
        }
        return form;
      },
    }
  }
</script>
